@import '../bootstrap'

.badge
  position: relative

  &:after
    color: $badge-color
    content: attr(data-badge)
    display: flex
    position: absolute
    font-family: $badge-font-family
    font-feature-settings: 'liga'
    top: -($badge-height / 2)
    right: -($badge-width)
    background-color: $theme.primary
    border-radius: $badge-border-radius
    height: $badge-height
    width: $badge-width
    font-size: $badge-font-size
    justify-content: center
    align-items: center
    flex-direction: row
    flex-wrap: wrap

  &--overlap
    &:after
      top: -8px
      right: -8px

    &.badge--left
      &:after
        left: -8px
        right: initial

    &.badge--bottom
      &:after
        bottom: -8px
        top: initial

  &--icon
    &:after
      font-family: 'Material Icons'

  &--left
    &:after
      left: -($badge-width)

  &--bottom
    &:after
      bottom: -($badge-height / 2)
      top: initial;
